import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'
import { actionCreators } from './store'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { actionCreators as loginActionCreators } from '../../pages/login/store'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button
} from './style';



class Header extends Component {
  getListArea () {
    const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props

    const jsList = list.toJS()//将immutable对象转换成普通对象
    const pageList = []
    if (jsList.length) {
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        pageList.push(
          <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
        )
      }
    }

    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
              <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
              <i
                ref={(icon) => this.spinIcon = icon}
                className="iconfont spin"
              >
                &#xe851;
             </i>
              换一批
              </SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            <SearchInfoList>
              {
                pageList
              }
            </SearchInfoList>
          </div>
        </ SearchInfo>
      )
    } else {
      return null
    }
  }

  render () {
    const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props;
    return (
      <div>
        <HeaderWrapper>
          <Link to='/'>
            <Logo />
          </Link>
          <Nav>
            <NavItem className='left active'>首页</NavItem>
            <NavItem className='left'>下载App</NavItem>
            {
              login ? (
                <NavItem onClick={logout} className='right'>退出</NavItem>
              ) : (
                  <Link to="/login">
                    <NavItem className='right'>登录</NavItem>
                  </Link>
                )
            }
            <SearchWrapper>
              <CSSTransition
                in={focused}
                timeout={200}
                classNames="slide" b
              >
                <NavSearch
                  className={focused ? 'focused' : ''}
                  onFocus={() => handleInputFocus(list)}
                  onBlur={handleInputBlur}
                />
              </CSSTransition>
              <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'} >&#xe63d;</i>
              {this.getListArea()}
            </SearchWrapper>
            <NavItem className='right'>
              <i className="iconfont">&#xe636;</i>
            </NavItem>
          </Nav>
          <Addition>
            <Link to="/write">
              <Button className='writting'>
                <i className="iconfont">&#xe608;</i>
                写文章
						</Button>
            </Link>
            {!login ? <Button className='reg'>注册</Button> : null}
          </Addition>
        </HeaderWrapper>
      </div >
    )
  }
}

const mapStateToPrps = (state) => {
  return {
    //state.get('header').get('focused')  等价下面的代码
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    totalPage: state.getIn(['header', 'totalPage']),
    login: state.getIn(['login', 'login'])
  }
}
const mapdispatchToProps = (dispatch) => {
  return {
    handleInputFocus (list) {
      // console.log(list)
      (list.size === 0) && dispatch(actionCreators.getList())
      dispatch(actionCreators.searchFocus())
    },
    handleInputBlur () {
      dispatch(actionCreators.searchBlur())
    },
    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter())
    },
    handleMouseLeave () {
      dispatch(actionCreators.mouseLeave())
    },
    handleChangePage (page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
      if (originAngle) {
        originAngle = parseInt(originAngle, 10)
      } else {
        originAngle = 0
      }
      spin.style.transform = `rotate(${originAngle + 360}deg)`
      if (page < totalPage) {
        dispatch(actionCreators.changePage(page + 1))
      } else {
        dispatch(actionCreators.changePage(1))
      }

    },
    logout () {
      dispatch(loginActionCreators.logout())
    }
  }
}

export default connect(mapStateToPrps, mapdispatchToProps)(Header)
